<template>
    <div class="layout-sider border radius4">
        <ul>
            <li v-for="sider in data" :key="sider">
                <div class="pad10-0 border-b pad-l6 bgd-f1 nav-title" @click="sider.isShow=!sider.isShow">{{sider.navTitle}}</div>
                <ul class="sider-items" v-bind:class="{hide:sider.isShow}">
                    <li class="pad10-0 pad-l6" v-for="option in sider.childrenOption" :key="option">{{option}}</li>
                </ul>
            </li>
        </ul>
    </div>
</template>

<script>
let data = [
    { "navTitle": "subNav1", "childrenOption": ["option1", "option2", "option3"] ,"isShow":true},
    { "navTitle": "subNav2", "childrenOption": ["option1", "option2"] ,"isShow":true},
    { "navTitle": "subNav3", "childrenOption": ["option1"] ,"isShow":true},
    { "navTitle": "subNav4", "childrenOption": [] ,"isShow":true},
    { "navTitle": "subNav5", "childrenOption": ["option1", "option2", "option3"] ,"isShow":true},
]
export default {
    data() {
        return { 
                data
            }
    }
}
</script>

<style>
    ul li {
        list-style: none;
    }

    .sider-items {
        margin-left: 20px;
    }

    .sider-items li {
        border-bottom: 1px solid #e2e2e2;
    }

    .sider-items li:hover,.nav-title:hover {
        background-color: #ccc;
    }

    .sider-items li:hover {
        border-left: 2px solid #000;
    }
    

/* 公共样式 */
/*padding  */
    .pad5 {
        padding: 5px;
    }
    .pad5-0 {
        padding: 5px 0;
    }
    .pad10-0 {
        padding: 10px 0;
    }
    .pad-l6 {
        padding-left: 6px;
    }
/*border  */
    .border {
        border:1px solid #e2e2e2;
    }
    .border-b {
        border-bottom: 1px solid #e2e2e2;
    }
/*border-redu  */
    .radius4 {
        border-radius: 4px;
    }
/*backgroundColor  */
    .bgd-f1 {
        background-color: #f1f1f1;
    }
/*display  */
    .block {
        display: block;
    }
    .inline-block {
        display: inline-block;
    }
    .hide {
        display: none;
    }
</style>
